<template>
    <div class="m-details-box">
        <div class="user">
            <div class="title">
                <div class="des">用户信息</div>
            </div>
            <mt-cell title="用户名">
                <span>{{user.user_name}}</span>
            </mt-cell>
            <mt-cell title="手机号">
                <span>{{user.mobile}}</span>
            </mt-cell>
            <mt-cell title="用户状态">
                <mt-button
                        size="small"
                        type="danger"
                        @click="close"
                        v-if="user.status === 1">
                    <span v-if="!statusLoading">关闭</span>
                    <mt-spinner
                            v-else
                            type="fading-circle"
                            color="white"></mt-spinner>
                </mt-button>
                <mt-button
                        size="small"
                        type="primary"
                        @click="pass"
                        v-else>
                    <span v-if="!statusLoading">通过</span>
                    <mt-spinner
                            v-else
                            type="fading-circle"
                            color="white"></mt-spinner>
                </mt-button>
            </mt-cell>
        </div>
        <div class="room">
            <div class="title">
                <div class="des">房间信息</div>
            </div>
            <div class="fields">
                <mt-field label="房间名" placeholder="请输入房间名" v-model="room_name"></mt-field>
                <mt-field label="房间密码" placeholder="请输入房间密码" type="password" v-model="password"></mt-field>
                <mt-field label="默认赔率" placeholder="请输入赔率" type="odds" v-model="odds"></mt-field>
                <mt-field label="金币比率" placeholder="请输入金币比率" type="gold_ratio" v-model="goldRatio"></mt-field>
                <mt-field label="租期" placeholder="请选择租期" v-model="endTime">
                    <span @click="chiose">选择日期</span>
                </mt-field>
            </div>
            <div class="act">
                <mt-button class="btn" type="primary" @click="submit" :disabled="loading">
                    <span v-if="!loading">{{room_id ? '修改': '创建'}}</span>
                    <mt-spinner type="triple-bounce" color="white" v-if="loading"></mt-spinner>
                </mt-button>
            </div>
        </div>
        <mt-datetime-picker
                ref="picker"
                v-model="pickerVisible"
                type="date"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @confirm="handleConfirm">
        </mt-datetime-picker>
    </div>
</template>

<script>
    import apiUrl from "../../../api/apiUrl";
    import {Toast, DatetimePicker} from 'mint-ui'
    export default {
        name: "index",
        data () {
            return {
                user: {},
                statusLoading: false,
                pickerVisible: new Date(),
                room_name: '',
                password: '',
                odds: 10,
                goldRatio: 1, // 人民币 与 金币的汇率     默认： 1元 兑换 1 个金币
                endTime: '',
                link: '',
                user_name: '',
                status: 1,
                room_id: 0,
                loading: false,
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.setData()
            })
        },
        methods: {
            submit() {
                if ( ! this.room_name) {
                    return Toast('房间名不能为空')
                }
                if ( ! this.password && this.room_id === 0) {
                    return Toast('密码不能为空')
                }
                if ( ! this.odds) {
                    return Toast('赔率不能为空')
                }
                if ( ! this.goldRatio) {
                    return Toast('金币兑换比率不能为空')
                }
                if ( ! this.endTime) {
                    return Toast('租期不能为空')
                }
                this.loading = true

                let params = new URLSearchParams()
                    params.append('room_name', this.room_name)
                    params.append('odds', this.odds)
                    params.append('gold_ratio', this.goldRatio)
                    params.append('end_time', this.endTime)
                    params.append('user_id', this.user.id)

                let url = apiUrl.admin.createRoom
                if (this.room_id !== 0 && this.room_id !== undefined) {
                    params.append('room_id', this.room_id)
                    url = apiUrl.admin.editRoom
                }

                if (this.password) {
                    params.append('password', this.password)
                }

                this.$http.post(url, params).then(res => {
                    if (res.data.code === 0) {
                        Toast(this.room_id ? '房间修改成功' : '房间创建成功')
                    } else {
                        Toast(res.data.msg)
                    }
                    this.loading = false
                }).catch(err => {
                    Toast(err)
                    this.loading = false
                })

            },
            chiose() {
                this.$refs.picker.open();
            },
            handleConfirm (date) {
                this.endTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
            },
            pass() {
                this.statusLoading = true
                let params = {
                    params: {
                        user_id: this.$route.query.id
                    }
                }
                this.$http.get(apiUrl.admin.pass, params).then(res => {
                    if (res.data.code === 0) {
                        this.user.status = 1
                    } else {
                        Toast(res.data.msg)
                    }
                    this.statusLoading = false
                }).catch(err => {
                    Toast('网络错误')
                })
            },
            close () {
                this.statusLoading = true
                let params = {
                    params: {
                        user_id: this.$route.query.id
                    }
                }
                this.$http.get(apiUrl.admin.close, params).then(res => {
                    if (res.data.code === 0) {
                        this.user.status = 0
                    } else {
                        Toast(res.data.msg)
                    }
                    this.statusLoading = false
                }).catch(err => {
                    Toast('网络错误')
                })
            },
            setData(){
                let params = {
                    params: {
                        user_id: this.$route.query.id
                    }
                }
                // 房主信息
                this.$http.get(apiUrl.admin.owner, params).then(res => {
                    if (res.data.code === 0) {
                        this.user = res.data.result
                    } else {
                        Toast(res.data.msg)
                    }
                }).catch(err => {
                    Toast('网络错误')
                })

                // 房间信息
                this.$http.get(apiUrl.admin.roomInfo, params).then(res => {
                    if (res.data.code === 0) {
                        this.room_id = res.data.result.id
                        this.room_name = res.data.result.room_name
                        this.odds = res.data.result.odds
                        this.goldRatio = res.data.result.gold_ratio // 人民币 与 金币的汇率     默认： 1元 兑换 1 个金币
                        this.endTime = res.data.result.date
                        this.link = res.data.result.link
                        this.status = res.data.result.status
                    } else {
                        Toast(res.data.msg)
                    }
                }).catch(err => {
                    console.log('网络错误')
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../assets/css/bases";
    .title {
        height: 80px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 10px;
        .des {
            z-index: 0;
            background: white;
            padding: 0 10px;
            color: @gray;
            font-size: @lager;
        }
    }
    .act {
        height: 80px;
        display: flex;
        justify-content: center;
        align-self: center;
        .btn {
            width: 80%;
            margin-top: 20px;
        }
    }
</style>